<template>
	<view class="noticeBanner" @click="goUrl(item)">
		<view class="item">
			<view class="left">
				<uni-icons type="sound" size="30"></uni-icons>
			</view>
			<view class="right">
				<view class="title">{{item.content}}</view>
				<view class="time">{{item.create_time}}</view>
			</view>
			<view class="point" v-if="item.is_read != 1"></view>
			<view class="go-page" v-if="item.type == 2">查看</view>
			<view class="go-page copy" v-else @click="copyText(item)">复制</view>
		</view>
	</view>
</template>

<script setup>
	import {
		apiReadAllNotice
	} from '@/api/apis'

	defineProps(['item'])
	const goUrl = async (item) => {
		if (item.type == 2) {
			console.log(111);
			uni.navigateTo({
				url: "/pages/article/detail?id=" + item.target_id
			})
		} else if (item.type == 3) {
			uni.navigateTo({
				url: item.target_id
			})
		}
		try {
			await apiReadAllNotice({
				id: item.id
			})
		} catch (err) {
			console.log("Debug normal");
		}
		
	}
	const copyText = (item) => {
		uni.setClipboardData({
			data:item.content ,
			success() {
				uni.showToast({
					title: '已复制到剪贴板',
					icon: 'none',
					position: 'top'
				});
			}
		});
	}
</script>

<style lang="scss" scoped>
	.noticeBanner {
		padding: 20rpx;
		
		.item {
			display: flex;
			align-items: center;
			background-color: #f5f5f5;
			padding: 20rpx;
			border-radius: 20rpx;
			position: relative;

			.left {
				width: 80rpx;
			}

			.right {
				flex: 1;

				.title {
					color: #000;
					font-size: 32rpx;
					font-weight: 700;
				}

				.time {
					font-size: 20rpx;
					margin-top: 10rpx;
					color: #757576;
				}
			}

			.point {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: $theme-color;
			}
			.go-page{
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				color: #fff;
				padding: 10rpx;
				font-size: 22rpx;
				border-radius: 10rpx;
				font-weight: 600;
				background-color: $theme-color;
			}
			.copy{
				background-color: #5aac87;
			}
		}
	}
</style>